<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Flappy Bird</title>
    <script src="source_load.js"></script>
    <script src="birds.js"></script>
    <script src="sky.js"></script>
    <script src="land.js"></script>
    <script src="pipe.js"></script>
    <style>
        #cvs {
            margin: 10px 300px;
        }
    </style>
</head>

<body>
    <canvas id="cvs" width="800" height="600"></canvas>
    <script>
        var imglist = [{
                "name": "birds",
                "src": "res/birds.png"
            },
            {
                "name": "land",
                "src": "res/land.png"
            },
            {
                "name": "pipe1",
                "src": "res/pipe1.png"
            },
            {
                "name": "pipe2",
                "src": "res/pipe2.png"
            },
            {
                "name": "sky",
                "src": "res/sky.png"
            }
        ];

        var cvs = document.getElementById("cvs");
        var ctx = cvs.getContext("2d");
        load(imglist, function (imgEls) {
            //创建对象

            var bird = new Bird(imgEls["birds"], 150, 100, 0.0003, 0.0006, ctx);
            var sky1 = new Sky(imgEls["sky"], 0, -0.3, ctx);
            var sky2 = new Sky(imgEls["sky"], 800, -0.3, ctx);
            var land1 = new Land(imgEls["land"], 0, -0.3, ctx);
            var land2 = new Land(imgEls["land"], 336 * 1, -0.3, ctx);
            var land3 = new Land(imgEls["land"], 336 * 2, -0.3, ctx);
            var land4 = new Land(imgEls["land"], 336 * 3, -0.3, ctx);
            var pipe1 = new Pipe(imgEls["pipe2"], imgEls["pipe1"], 400, -0.1, ctx);
            var pipe2 = new Pipe(imgEls["pipe2"], imgEls["pipe1"], 600, -0.1, ctx);
            var pipe3 = new Pipe(imgEls["pipe2"], imgEls["pipe1"], 800, -0.1, ctx);
            var pipe4 = new Pipe(imgEls["pipe2"], imgEls["pipe1"], 1000, -0.1, ctx);
            var pipe5 = new Pipe(imgEls["pipe2"], imgEls["pipe1"], 1200, -0.1, ctx);
            //主循环
            var preTime = Date.now();

            function run() {
                var now = Date.now();
                dt = now - preTime;
                preTime = now;
                ctx.clearRect(0, 0, 800, 600);
                //图片绘制
                sky1.update(dt);
                sky1.draw()
                sky2.update(dt);
                sky2.draw()
                sky1.setCount(2);


                pipe1.update(dt);
                pipe1.draw();
                pipe2.update(dt);
                pipe2.draw();
                pipe3.update(dt);
                pipe3.draw();
                pipe4.update(dt);
                pipe4.draw();
                pipe5.update(dt);
                pipe5.draw();
                pipe1.setCount(5, 200);

                land1.update(dt);
                land1.draw();
                land2.update(dt);
                land2.draw();
                land3.update(dt);
                land3.draw();
                land4.update(dt);
                land4.draw();
                land1.setCount(4);

                bird.update(dt)
                bird.draw();

                var gameover = false;
                gameover = gameover || pipe1.hitTest(bird.x, bird.y);
                gameover = gameover || pipe2.hitTest(bird.x, bird.y);
                gameover = gameover || pipe3.hitTest(bird.x, bird.y);
                gameover = gameover || pipe4.hitTest(bird.x, bird.y);
                gameover = gameover || pipe5.hitTest(bird.x, bird.y);                
                
                if (bird.y < 0 || bird.y > 488 - 45 / 2) {
                    gameover = true;
                }
                if (!gameover) {
                    requestAnimationFrame(run);
                }


            }
            requestAnimationFrame(run);

            cvs.addEventListener("click", function () {
                bird.speed = -0.3;
            })
        })
    </script>
</body>

</html>